<template>
  <div class="header-wrapper">
    <div class="header-logo-box">
      <img src="@/assets/images/logo.png" alt="" />
    </div>
<!-- 搜索跳转盒子 -->
    <div class="header-search-box" @click="toSearch">
      <svg
        focusable="false"
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        viewBox="0 0 1024 1024"
      >
        <path
          d="M448 85.333333c200.298667 0 362.666667 162.368 362.666667 362.666667 0 84.778667-29.077333 162.773333-77.824 224.512l161.322666 161.322667-60.330666 60.330666-161.322667-161.322666A361.109333 361.109333 0 0 1 448 810.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333z m0 85.333334C294.826667 170.666667 170.666667 294.826667 170.666667 448s124.16 277.333333 277.333333 277.333333 277.333333-124.16 277.333333-277.333333S601.173333 170.666667 448 170.666667z"
        ></path>
      </svg>
      <span class="header-search-keywords">猜你所想</span>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
const router=useRouter()
const toSearch=()=>{
  router.push("/search")
}
</script>

<style lang="scss">
.header-wrapper {
  display: flex;
  align-items: center;

  height: 48/375 * 100vw;
  .header-logo-box {
    width: 80/375 * 100vw;
    height: 18/375 * 100vw;
    margin-left: 16/375 * 100vw;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .header-search-box {
    display: flex;
    align-items: center;

    width: 159.425/375 * 100vw;
    height: 36/375 * 100vw;
    border-radius: 2/375 * 100vw;
    margin: 0 12/375 * 100vw;
    padding-left: 12/375 * 100vw;
    background-color: hsla(229, 9%, 63%, 0.1);
    .header-search-keywords {
      margin-left: 4/375 * 100vw;
      font-size: 14/375 * 100vw;
    }
  }
}
</style>